<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令：英雄列表</title>
    <style>
        body {
            font-family: sans-serif;
        }

        #container {
            max-width: 900px;
            margin: 30px auto;
        }

        .search-form {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .search-form input,
        .search-form select {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        .search-form button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .search-form button.clear {
            background-color: #6c757d;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            border: 1px solid #e0e0e0;
            padding: 15px;
            text-align: center;
            vertical-align: middle;
        }

        .avatar {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
    <script type="importmap">
        {
            "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
        }
    </script>
</head>

<body>

<div id="container">
    <h1>超级英雄名册</h1>

    <form class="search-form">
        <input type="text" placeholder="英雄名..." v-model="searchQuery.name" />

        <select v-model="searchQuery.publisher">
            <option value="">所有阵营</option>
            <option value="Marvel">漫威</option>
            <option value="DC">DC</option>
        </select>
        <button type="button" @click="search">筛选</button>
        <button type="button" @click="clear" class="clear">重置</button>
    </form>

    <table class="table">
        <thead>
        <tr>
            <th>英雄名</th>
            <th>头像</th>
            <th>真名</th>
            <th>阵营</th>
            <th>首次登场</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="hero in heroList" :key="hero.id">
            <td>{{ hero.name }}</td>
            <td><img :src="hero.image" class="avatar"></td>
            <td>{{ hero.alias }}</td>
            <td>
                <span v-if="hero.publisher === 'Marvel'">漫威</span>
                <span v-else-if="hero.publisher === 'DC'">DC</span>
                <span v-else>独立</span>
            </td>
            <td>{{ hero.firstAppearance }}</td>
        </tr>
        </tbody>
    </table>
</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {

            return {
                searchQuery: {
                    name: '',
                    publisher: ''
                },
                heroList: [
                    { id: 101, name: '钢铁侠', alias: '托尼·斯塔克', image: 'https://s2.loli.net/2025/06/18/pCZq31ouRv6IMYb.png', publisher: 'Marvel', firstAppearance: 'Tales of Suspense #39 (1963)' },
                    { id: 102, name: '超人', alias: '克拉克·肯特', image: 'https://s2.loli.net/2025/06/18/mrKD6j5q1oeLawS.png', publisher: 'DC', firstAppearance: 'Action Comics #1 (1938)' },
                    { id: 103, name: '蜘蛛侠', alias: '彼得·帕克', image: 'https://s2.loli.net/2025/06/18/rNecjDA1Igubfpw.png', publisher: 'Marvel', firstAppearance: 'Amazing Fantasy #15 (1962)' }
                ]
            }
        },
        methods: {
            search() {
                alert(`开始筛选: 英雄名=${this.searchQuery.name}, 阵营=${this.searchQuery.publisher}`);
            },
            clear() {
                this.searchQuery.name = '';
                this.searchQuery.publisher = '';
            }
        }
    }).mount('#container')
</script>
</body>

</html>
